<template>
<div class="page">
    <div class="user">
        <div class="phone" v-if="formData.dyPhone">
            <span>手机号：</span>
            <span>{{ formData.dyPhone }}</span>
        </div>
        <el-button type="primary" @click="dialogVisible = true">换 绑</el-button>
    </div>
    <div class="tip">
        <span>素材领取时间：中午12点到下午6点</span>
    </div>
    <div class="tip tip2">
        规则：发布视频后，等待列表合格（3小时后），合格之后提交平台，当天晚上12点可删除视频，提前删除不结算
    </div>
    <div class="tip">
        <span>一个账号每天只能领取一个视频</span>
    </div>
    <div class="sc">
        <div class="center">
            <el-button type="primary" @click="getVideo">获取视频</el-button>
            <div class="center" style="margin-top: 10px;">
                    当前视频库还有 {{ tableData.length }} 条视频
            </div>
        </div>
        <div class="sc-link center" v-if="videoForm.videoUrl">
            <el-link type="success" style="font-size: 14px; margin:10px 0; text-decoration:underline" :href="videoForm.videoUrl" target="_blank">这是你的视频链接,点击此处打开下载</el-link>
            <video width="200" controls>
              <source :src="videoForm.videoUrl" type="video/mp4">
            </video>
        </div>
        <div class="center" v-else style="margin-top: 10px;">
           当前未获取视频，点击按钮获取
        </div>
    </div>
    <div class="sc">
        <div class="tip tip2">发布视频后，请在下方提交主页和二维码，等待管理员审核即可</div>
        <div class="dy-status">
            <span class="labe">当前状态：</span>
            <el-button type="info" size="mini" v-if="videoForm.status == '0'">未接单</el-button>
            <el-button type="primary" size="mini" v-if="videoForm.status == '1'">发布中</el-button>
            <el-button type="warning" size="mini" v-if="videoForm.status == '2'">审核中</el-button>
            <el-button type="success" size="mini" v-if="videoForm.status == '3'">合格</el-button>
            <el-button type="danger" size="mini" v-if="videoForm.status == '4'">失败</el-button>
        </div>
        <div class="dy-home">
            <span class="labe">你的抖音主页：</span>
            <div class="dy-img">
                <img src="../assets/dyhome.jpg" alt="">
                <el-upload
                    class="avatar-uploader"
                    action="http://118.25.99.223:3000/web/api/rest/uploadimg"
                    :show-file-list="false"
                    :on-success="(res, file)=>handleAvatarSuccess(res,file,'dyHome')"
                    ref="dyhome"
                    key="dyhome"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="videoForm.dyHome" :src="videoForm.dyHome" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
        </div>
        <div class="dy-home">
            <span class="labe">你的抖音码：</span>
            <div class="dy-img">
                <img src="../assets/dycode.jpg" alt="">
                <el-upload
                    class="avatar-uploader"
                    action="http://118.25.99.223:3000/web/api/rest/uploadimg"
                    :show-file-list="false"
                    :on-success="(res, file)=>handleAvatarSuccess(res,file,'dyCode')"
                    ref="dyCode"
                    key="dyCode"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="videoForm.dyCode" :src="videoForm.dyCode" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
        </div>
        <el-button type="primary" @click="handDy" style="width: 100%; margin:20px 0">提交</el-button>
    </div>
    <el-dialog
      title="绑定手机号"
      :visible.sync="dialogVisible"
      width="100%">
        <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" class="demo-formData">
            <el-form-item label="手机号" prop="dyPhone">
                <el-input v-model="formData.dyPhone"></el-input>
            </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handApply">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
import comm from "@/mixins/comm.js";
export default {
    mixins: [comm],
    data() {
        var checkuser = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号不能为空'));
            } else if (!/^1[3456789]\d{9}$/.test(value)) {
                return callback(new Error('手机号格式不正确'));
            } else {
                callback();
            }
        };
        return {
            tableData:[],
            dialogVisible: false,
            // dyHome: "",
            // dyCode: "",
            formData: {
                dyPhone: "",
                dyHome: "",
                dyCode: "",
                init: false
            },
            rules: {
                dyPhone: [
                    { validator: checkuser, trigger: 'change' }
                ]
            },
            videoForm: {
                _id: "",
                dyPhone: "",
                dyHome: "",
                dyCode: "",
                videoUrl: "",
                status: "0"
            }
        }
    },
    async created() {
        this.formData.dyPhone = localStorage.getItem("dyPhone") || ""
        if (!this.formData.dyPhone) {
            this.dialogVisible = true
        } else {
            await this.initGetVideo()
        }
        await this.initTatolVideo()
        this.formData.init = false
    },
    methods: {
        async handApply() {
            let valid = await this.validateForm("formData")
            if (valid) {
                localStorage.setItem("dyPhone", this.formData.dyPhone)
                this.dialogVisible = false
                this.initTatolVideo()
            }
        },
        async handDy() {
            if (this.videoForm.videoUrl == "") {
                await this.$notify({
                    title: '警告',
                    message: '请先获取视频，再提交',
                    type: 'warning'
                })
                return false
            }
            let res = await this.$awaitApi("userSetVideo", this.videoForm)
            if(!res.err) {
                this.$msgOk("提交成功")
            }
            console.log(res)
            setTimeout(()=>{
                location.reload()
            },1500)
        },
        isBetweenTwoAndSevenPM() {
            const now = new Date(); // 获取当前时间
            const hours = now.getHours(); // 获取当前小时数
            if (hours >= 12 && hours < 18) {
                return true; // 在范围内
            } else {
                return false; // 不在范围内
            }
        },
        async initGetVideo() {
            let data = Object.assign({},this.formData) 
            data.init = 0
            let res = await this.$awaitApi("getVideo", data)
            if (res.data.items && res.data.items._id) {
                this.videoForm = res.data.items
            }
        },
        async initTatolVideo() {
            let res = await this.$awaitApi("dyAll")
            console.log(res)
            let items = res.data.items.filter(e => e.status == "0")
            if (!res.err) {
                this.tableData = items
            }
        },
        async getVideo() {
            if (!this.isBetweenTwoAndSevenPM()) {
                await this.$notify({
                    title: '警告',
                    message: '请下午12点到晚上6点再领取',
                    type: 'warning'
                })
                return false
            }
            let res = await this.$awaitApi("getVideo", this.formData)
            console.log(res)
            if (res.err || !res.data.items) {
                return
            } else if (res.data.items._id) {
                if (res.data.code == 210) {
                    await this.$notify({
                      title: '警告',
                      message: '当前账号已有素材',
                      type: 'warning'
                    })
                }
                this.videoForm = res.data.items
            } else {
                await this.$notify({
                  title: '警告',
                  message: '暂时无素材，请等待',
                  type: 'warning'
                })
            }
            // setTimeout(()=>{
            //     location.reload()
            // },1500)
        },
        handleAvatarSuccess(res, file, type) {
            console.log(res,file)
            this.$set(this.videoForm, type, res.url)
            this.$forceUpdate()
        },
        beforeAvatarUpload(file) {
            const isimg = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isimg) {
                this.$message.error('上传图片');
            }
            return isimg
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    padding: 10px;
    font-size: 14px;
}
.user {
    display: flex;
    align-items: center;
    justify-content: center;
    .phone {
        margin-right: 10px;
    }
}
.tip {
    margin:10px 0;
    text-align: center;
    color: #fff;
    span {
        background: rgb(245, 108, 108);
        padding: 2px 8px;
    }
}
.tip2 {
    background: rgb(230, 162, 60);
    padding: 2px 8px;
}
.dy-status {
    margin: 10px 0;
    font-weight: bold;
    font-size: 16px;
}
.sc {
    background: #fff;
    box-shadow: 0 0 18px 0 rgba(0,0,0,.06);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}



.dy-img {
    display: flex;
    justify-content: space-between;
    >img {
        width: 40%;
    }
}
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 220px;
    line-height: 220px;
    text-align: center;
  }
  
  .avatar {
    width: 160px;
    height: 220px;
    display: block;
  }
</style>